<template>
	<view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#FFD101"></uni-segmented-control>
		<uni-row>
			<uni-col v-for="item in data" :key='item.id' :span="12" >
				<view class="p8 mt10" v-if="form.type != 'encyclopedias'" @click="onLink(item.nid)"><image style="width: 100%;" :src="item.img"></image></view>
				<view class="p8 mt10" v-else @click="onLink(item.interaction_id)"><image style="width: 100%;" :src="item.img"></image></view>
				<view class="p0-8 title">{{item.title}}</view>
			</uni-col>
		</uni-row>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				current: 0,
				items:['资料','工艺/节点','百科'],
				
				form:{page:1,type:'information'},
				data:[]
			}
		},
		onShow() {
			this.onGetInfo()
		},
		methods: {
			onGetInfo(){
				let _this = this
				this.$request_api('applet_api/user/collect','POST',this.form).then(res => {
					let arr = []
					res.data.forEach((e) => {
						if(e.img){
							arr.push(e)
						}
					})
					_this.data = arr
				}).catch(err => {
					console.log(err)
				})
			},
			
			onClickItem(e){
				this.form.page = 1
				if(e.currentIndex == 0){
					this.form.type = 'information'
				}
				
				if(e.currentIndex == 1){
					this.form.type = 'node'
				}
				
				if(e.currentIndex == 2){
					this.form.type = 'encyclopedias'
				}
				
				this.current = e.currentIndex
				this.onGetInfo()
			},
			onLink(id){
				let url = ''
				if(this.form.type == 'information'){
					url = '/pages/information/info/index'
				}
				if(this.form.type == 'node'){
					url = '/pages/node/info/index'
				}
				if(this.form.type == 'encyclopedias'){
					url = '/pages/index/info/index'
				}
				uni.navigateTo({
					url: url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.title{font-size: .9rem;color: #111;font-weight: 600;height: 40px;}
.company{font-size: .8rem;margin-top: 5px;}
.node{border-top: 1px solid #EEE;padding: 24px 0px;}
.node-image{width: 55px;height: 55px;}
.text {font-size: 14px;margin: 5px 5px 5px 5px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical}
.grid-item-box {
	flex: 1;
	// position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
}
</style>
